<template>
  <div class="pingjia">
       <mt-header title="创彩原创旗袍服饰旗舰店" :fixed="isFixed">
        <router-link to="PinPai" slot="left">
          <div class="iconfont">&#xe603;</div>
        </router-link>
        <router-link to="ShopCar" slot="right">
        <div class="shop-car iconfont">&#xe601;</div>
      </router-link>
      </mt-header>
        <div class="kong"></div>
        <div class="table">
          <a class="xq" href="#">详情</a>
          <router-link to="PingJia" slot="left">
          <a class="xq" href="#">评价</a>
          </router-link>
          <a class="xq" href="#">成交</a>
        </div>
    <div class="evaluate-content" style="">
      <div class="evaluate-tit">
        <div class="evaluate-tit-h4">
          <h4><i>商品评价</i></h4>
          <span></span>
        </div>
        <div class="evaluate-tit-lf">
          <span>全部</span>
          <a href="#"><i></i></a>
          <span>1427条评论</span>
        </div>
        <div class="evaluate-tit-ct">
          <span>加评</span>
          <a href="#"><i></i></a>
          <span>329条评论</span>
        </div>

      </div>
      <div class="evaluate-box">
        <div class="evaluate-card">
          <div class="evaluate-icon">
            <div class="evaluate-icon-pic">
              <img src="../../assets/img/images/evaluate-icon1.png" alt="">
            </div>
            <div class="evaluate-icon-txt">
              <h4>(爱范儿)</h4>
              <span></span><span></span><span></span>
              <p>尺码：S</p>
              <p>颜色：米色</p>
            </div>
          </div>
          <div class="evaluate-description">
            <p>衣衣手感很好，质量还是一如既往的好，遗憾没有抢到搭配的外套。</p>
            <span>2015-12-14 11:54:00</span>
          </div>
        </div>
        <div class="evaluate-card">
          <div class="evaluate-icon">
            <div class="evaluate-icon-pic">
              <img src="../../assets/img/images/evaluate-icon2.png" alt="">
            </div>
            <div class="evaluate-icon-txt">
              <h4>(旧上海)</h4>
              <span></span><span></span><span></span>
              <p>尺码：S</p>
              <p>颜色：米色</p>
            </div>
          </div>
          <div class="evaluate-description">
            <p>质量很好，厚实，很显身材，全五分好评！</p>
            <span>2015-12-14 11:54:00</span>
          </div>
        </div>
        <div class="evaluate-card">
          <div class="evaluate-icon">
            <div class="evaluate-icon-pic">
              <img src="../../assets/img/images/evaluate-icon3.png" alt="">
            </div>
            <div class="evaluate-icon-txt">
              <h4>(爱范儿)</h4>
              <span></span><span></span><span></span>
              <p>尺码：S</p>
              <p>颜色：米色</p>
            </div>
          </div>
          <div class="evaluate-description">
            <p>衣衣手感很好，质量还是一如既往的好，遗憾没有抢到搭配的外套。</p>
            <span>2015-12-14 11:54:00</span>
          </div>
        </div>
        <div class="evaluate-card">
          <div class="evaluate-icon">
            <div class="evaluate-icon-pic">
              <img src="../../assets/img/images/evaluate-icon4.png" alt="">
            </div>
            <div class="evaluate-icon-txt">
              <h4>(旧上海)</h4>
              <span></span><span></span><span></span>
              <p>尺码：S</p>
              <p>颜色：米色</p>
            </div>
          </div>
          <div class="evaluate-description">
            <p>质量很好，厚实，很显身材，全五分好评！</p>
            <span>2015-12-14 11:54:00</span>
          </div>
        </div>
        <div class="evaluate-card">
          <div class="evaluate-icon">
            <div class="evaluate-icon-pic">
              <img src="../../assets/img/images/evaluate-icon1.png" alt="">
            </div>
            <div class="evaluate-icon-txt">
              <h4>(爱范儿)</h4>
              <span></span><span></span><span></span>
              <p>尺码：S</p>
              <p>颜色：米色</p>
            </div>
          </div>
          <div class="evaluate-description">
            <p>衣衣手感很好，质量还是一如既往的好，遗憾没有抢到搭配的外套。</p>
            <span>2015-12-14 11:54:00</span>
          </div>
        </div>
        <div class="evaluate-card">
          <div class="evaluate-icon">
            <div class="evaluate-icon-pic">
              <img src="../../assets/img/images/evaluate-icon2.png" alt="">
            </div>
            <div class="evaluate-icon-txt">
              <h4>(旧上海)</h4>
              <span></span><span></span><span></span>
              <p>尺码：S</p>
              <p>颜色：米色</p>
            </div>
          </div>
          <div class="evaluate-description">
            <p>质量很好，厚实，很显身材，全五分好评！</p>
            <span>2015-12-14 11:54:00</span>
          </div>
        </div>

        <div class="more">
          <a href="#">查看更多评价~ ~ ~</a>
        </div>
      </div>
    </div>
     <div class="kongde"></div>
      <div class="dibu">
        <a class="jiaru" href="#">加入购物车</a>
        <a class="goumai" href="#">立即购买</a>
      </div>
  </div>
</template>



<script type="text/javascript">
   export default {
       
         data(){
          return{
            isFixed:true,
          }
        },
        
    }
</script>


<style scopde>
  header{
    border-color: #111;
    background-color: #581513;
    color: #fff;
  }
   .kong{
    height:40px;
    position: relative;
  }
  .table{
    /*position: fixed;*/
    top: 48px;
    left: 0px;
    height: 30px;
    width: 100%;
    background-color: #f6e0c2;
    z-index: 9999;
    font-size: 0px;
    letter-spacing: 0px;
  }
  .xq{
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    height: 30px;
    line-height: 30px;
    color: #39191a;
    width: 33.33%;
    text-align: center;
    position: relative;
  }
  .mint-header {
    background-color: #581513;
}
   .evaluate-content {
    width: 100%;
    background-color: #fef5e8;
  }
  .evaluate-tit .evaluate-tit-h4 {
    width: 100%;
    position: relative;
    height: 34px;
  }
  .evaluate-tit .evaluate-tit-h4 h4 {
    font-size: 14px;
    color: #591614;
    height: 34px;
    line-height: 34px;
    text-align: center;
    position: relative;
    z-index: 20;
  }
  .evaluate-tit .evaluate-tit-h4 span {
    display: block;
    width: 280px;
    position: absolute;
    top: 18px;
    left: 50%;
    height: 2px;
    transform: translate(-140px,0px);
    background-color: rgba(89,22,20,0.4);
    z-index: 10;
  }
  .evaluate-content .evaluate-tit .evaluate-tit-lf, .evaluate-content .evaluate-tit .evaluate-tit-ct {
    display: inline-block;
    width: 40%;
    text-align: center;
  }
  .evaluate-content .evaluate-tit-lf span, .evaluate-content .evaluate-tit-ct span {
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    color: #333;
    line-height: 12px;
    height: 12px;
  }
  .evaluate-content .evaluate-tit-lf a, .evaluate-content .evaluate-tit-ct a {
    display: inline-block;
    vertical-align: top;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid #333;
    box-sizing: border-box;
    position: relative;
    top: 2px;
  }
  .evaluate-content .evaluate-tit-lf a i, .evaluate-content .evaluate-tit-ct a i {
    display: block;
    vertical-align: top;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #333;
    position: absolute;
    top: 1px;
    left: 1px;
  }
  .evaluate-tit .evaluate-tit-h4 h4 i {
    display: inline-block;
    font-style: normal;
    background-color: #fef5e8;
    width: 70px;
    text-align: center;
  }
  .evaluate-box .evaluate-card {
    border-top: 1px solid rgba(0,0,0,0.2);
    box-sizing: border-box;
    height: 90px;
    letter-spacing: 0px;
    font-size: 0px;
  }
  .evaluate-box .evaluate-card .evaluate-icon {
    display: inline-block;
    vertical-align: top;
    width: 45%;
    height: 90px;
    letter-spacing: 0px;
    font-size: 0px;
  }
  .evaluate-box .evaluate-card .evaluate-icon-pic {
    display: inline-block;
    vertical-align: top;
  }
  .evaluate-box .evaluate-card .evaluate-icon-pic img {
    display: block;
    width: 44px;
    height: 44px;
    margin: 18px 10px;
  }
  .evaluate-box .evaluate-card .evaluate-icon-txt {
    display: inline-block;
    vertical-align: top;
    padding-top: 18px;
  }
  .evaluate-box .evaluate-card .evaluate-icon-txt span {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url(../../assets/img/images/heart-red.png) no-repeat 0 center;
    -webkit-background-size: 7px 7px;
    background-size: 7px 7px;
  }
  .evaluate-box .evaluate-card .evaluate-icon-txt p {
    font-size: 10px;
    line-height: 16px;
    height: 16px;
    color: #8e8e8e;
  }
  .evaluate-description {
    display: inline-block;
    width: 55%;
    font-size: 10px;
    padding: 17px 10px 0 0;
    box-sizing: border-box;
    position: relative;
    height: 90px;
  }
  .evaluate-description p {
    font-size: 11px;
    color: #333333;
    line-height: 15px;
  }
  .evaluate-description span {
    position: absolute;
    right: 20px;
    bottom: 14px;
  }
  .evaluate-box .more, .bargain-content .more {
    width: 100%;
    height: 30px;
    background-color: #f6e0c2;
    margin-bottom: 1rem;
  }
  .evaluate-box .more a, .bargain-content .more a {
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #591614;
    text-align: center;
  }
  .kongde{
    height:48px;
    width:100%;
  }
  .dibu{
    width: 100%;
    height: 48px;
    background-color: #591614;
    position: fixed;
    bottom: 0px;
    left: 0px;
  }
  .jiaru{
    display: inline-block;
    float: right;
    font-size: 12px;
    line-height: 28px;
    height: 28px;
    color: #fff;
    border-radius: 4px;
    background-color: #ff9125;
    margin: 10px 10px 10px 0;
    width: 75px;
    text-align: center;
  }
  .goumai{
    display: inline-block;
    float: right;
    font-size: 12px;
    line-height: 28px;
    height: 28px;
    color: #fff;
    border-radius: 4px;
    background-color: #bd0214;
    margin: 10px 10px 10px 0;
    width: 75px;
    text-align: center;
  }
</style>